<template>
  <div class="classHourBox">
    <div class="topTitle">课时管理</div>
    <div style="margin:20px 0;">
      <el-card>
        <el-row style="line-height: 32px;">
          <el-col :span="3">课时总数 0</el-col>
          <el-col :span="5" :offset="16">
            <el-dropdown>
              <el-button type="info" size="small">
                添加章/节
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addChapter">添加章</el-dropdown-item>
                <el-dropdown-item @click.native="addSection">添加节</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!--            <el-button type="success" size="small" icon="el-icon-plus" @click="addClassHour">添加课时</el-button>-->
            <!--<el-button type="info" size="small" icon="el-icon-menu">批量添加</el-button>-->

          </el-col>
        </el-row>
      </el-card>
      <!-- 章节点 -->
      <el-collapse v-model="chapterActiveName" accordion style="margin:20px 0">
        <template v-for="(item, index) in tableData">
          <el-collapse-item v-if="item.title" :name="index+1" :key="index" class="collapseTitle">
            <template slot="title">
              <span class="collapse-hint">第{{ index + 1 }}章：{{ item.title }}</span>
              <div class="collapse-btn">
                <el-dropdown style="margin-left: 10px">
                  <el-button icon="el-icon-plus" size="mini" circle @click="stopPreven($event)"/>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addSection(item.id,index)">添加节</el-dropdown-item>
                    <el-dropdown-item @click.native="addClassHour(item.id,index)">添加课时</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown style="margin-left: 10px">
                  <el-button icon="el-icon-more" size="mini" circle @click="stopPreven($event)"/>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addChapter(item.id)">重命名</el-dropdown-item>
                    <el-dropdown-item @click.native="deleteChapter(index)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
            <div
              v-for="(item1, index1) in item.subLessones"
              :key="index1"
              style="margin: 10px 0 10px 20px;"
            >
              <div class="stairCard-box">
                <div class="stairCard-title">
                  <el-tag v-if="item1.status" type="info" effect="dark">未发布</el-tag>
                  <div class="stairCard-title-hint">课时{{ index1+1 }}：{{ item1.title }}</div>
                  <div class="stairCard-title-btn">
                    <el-button
                      icon="el-icon-edit"
                      size="mini"
                      circle
                      @click="addClassHour(item1.id)"
                    />
                    <el-button icon="el-icon-view" size="mini" circle/>
                    <el-dropdown style="margin-left: 10px">
                      <el-button
                        icon="el-icon-more"
                        size="mini"
                        circle
                        @click="stopPreven($event)"
                      />
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-if="item1.status"
                          @click.native="courseIssue(serial)"
                        >发布课时
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="!item1.status"
                          @click.native="cancelIssue(serial)"
                        >取消发布
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="deleteCourse(serial)">删除课时</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
                <div class="stairCard-content">
                  <div class="stairCard-content-step">
                    <a href="#">
                      <i class="el-icon-view"/>
                      <div>预习</div>
                    </a>
                    <span>
                      <i class="el-icon-d-arrow-right"/>
                    </span>
                  </div>
                  <div class="stairCard-content-step">
                    <a href="#" class="active">
                      <i class="el-icon-collection"/>
                      <div>任务学习</div>
                    </a>
                    <span>
                      <i class="el-icon-d-arrow-right"/>
                    </span>
                  </div>
                  <div class="stairCard-content-step">
                    <a href="#">
                      <i class="el-icon-notebook-1"/>
                      <div>联系</div>
                    </a>
                    <span>
                      <i class="el-icon-d-arrow-right"/>
                    </span>
                  </div>
                  <div class="stairCard-content-step">
                    <a href="#">
                      <i class="el-icon-finished"/>
                      <div>作业</div>
                    </a>
                    <span>
                      <i class="el-icon-d-arrow-right"/>
                    </span>
                  </div>
                  <div class="stairCard-content-step">
                    <a href="#">
                      <i class="el-icon-sunny"/>
                      <div>课外</div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 节节点 -->
            <el-collapse v-model="sectionActiveName" style="margin: 10px 0 10px 20px;">
              <template v-for="(val, num) in item.subChapters">
                <el-collapse-item v-if="val.name" :name="num+1" :key="num+1">
                  <template slot="title">
                    <span class="collapse-hint">第{{ num+1 }}节:{{ val.name }}</span>
                    <div class="collapse-btn">
                      <el-button
                        icon="el-icon-plus"
                        size="mini"
                        circle
                        @click="stopPreven($event)"
                      />
                      <el-dropdown style="margin-left: 10px">
                        <el-button
                          icon="el-icon-more"
                          size="mini"
                          circle
                          @click="stopPreven($event)"
                        />
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="addSection(item.id)">重命名</el-dropdown-item>
                          <el-dropdown-item @click.native="deleteSection(index,num)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </template>
                  <div
                    v-for="(item2, index2) in val.thirdCourse"
                    :key="index2"
                    style="margin: 10px 0 10px 40px;">
                    <div class="stairCard-box">
                      <div class="stairCard-title">
                        <el-tag v-if="item2.status" type="info" effect="dark">未发布</el-tag>
                        <div class="stairCard-title-hint">课时{{ index2+1 }}：{{ item2.name }}</div>
                        <div class="stairCard-title-btn">
                          <el-button
                            icon="el-icon-edit"
                            size="mini"
                            circle
                            @click="addClassHour(item2.id)"
                          />
                          <el-button icon="el-icon-view" size="mini" circle/>
                          <el-dropdown style="margin-left: 10px">
                            <el-button
                              icon="el-icon-more"
                              size="mini"
                              circle
                              @click="stopPreven($event)"
                            />
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                v-if="item2.status"
                                @click.native="courseIssue()"
                              >发布课时
                              </el-dropdown-item>
                              <el-dropdown-item
                                v-if="!item2.status"
                                @click.native="cancelIssue()"
                              >取消发布
                              </el-dropdown-item>
                              <el-dropdown-item @click.native="deleteCourse()">删除课时</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </div>
                      </div>
                      <div class="stairCard-content">
                        <div class="stairCard-content-step">
                          <a href="#">
                            <i class="el-icon-view"/>
                            <div>预习</div>
                          </a>
                          <span>
                            <i class="el-icon-d-arrow-right"/>
                          </span>
                        </div>
                        <div class="stairCard-content-step">
                          <a href="#" class="active">
                            <i class="el-icon-collection"/>
                            <div>任务学习</div>
                          </a>
                          <span>
                            <i class="el-icon-d-arrow-right"/>
                          </span>
                        </div>
                        <div class="stairCard-content-step">
                          <a href="#">
                            <i class="el-icon-notebook-1"/>
                            <div>联系</div>
                          </a>
                          <span>
                            <i class="el-icon-d-arrow-right"/>
                          </span>
                        </div>
                        <div class="stairCard-content-step">
                          <a href="#">
                            <i class="el-icon-finished"/>
                            <div>作业</div>
                          </a>
                          <span>
                            <i class="el-icon-d-arrow-right"/>
                          </span>
                        </div>
                        <div class="stairCard-content-step">
                          <a href="#">
                            <i class="el-icon-sunny"/>
                            <div>课外</div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </template>
            </el-collapse>
          </el-collapse-item>
        </template>
      </el-collapse>
    </div>
    <!-- 添加章弹框 -->
    <el-dialog :visible.sync="chapterDialog" title="创建章" width="30%">
      <el-form ref="chapterForm" :model="EduxcloudCourseChapter" :rules="chapterRules" label-width="100px">
        <el-form-item label="章标题" prop="title">
          <el-input v-model="EduxcloudCourseChapter.title" placeholder="请输入章名称"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chapterDialogConfirm">确 定</el-button>
        <el-button @click="chapterDialogCancle">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加节弹框 -->
    <el-dialog :visible.sync="sectionDialog" title="创建节" width="30%">
      <el-form ref="sectionForm" :model="EduxcloudCourseChapter" :rules="sectionRules" label-width="100px">
        <el-form-item label="节标题" prop="title">
          <el-input v-model="EduxcloudCourseChapter.title" placeholder="请输入节名称"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sectionDialogConfirm">确 定</el-button>
        <el-button @click="sectionDialogCancle">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加课时弹框 -->
    <addcourse :visiabledialog="addCourseDialog" :home="this" @changeVisiable="changeVisiable"/>
  </div>
</template>
<script>
  import Addcourse from './classhour/addcoursedialog'
  import eventBus from '@/eventBus'
  import {getTenantId} from '@/utils/auth';
  import {courseChapter, getCourseChapterList} from '@/api/subject/course_chapter';

  export default {
    components: {
      Addcourse
    },
    // 传值
    props: {
      'home': Object
    },
    data() {
      return {
        EduxcloudCourseChapter: {},
        keyWord: '',
        chapterId: '',
        acceptEduxcloudCourseId: '',
        chapterActiveName: '1',
        sectionActiveName: '1',
        total: 0,
        tableData: [],
        addCourseDialog: false,
        chapterDialog: false,
        sectionDialog: false,
        sectionForm: {
          sectionWord: ''
        },
        chapterRules: {
          title: [{required: true, message: '请输入章名称', targger: blur}]
        },
        sectionRules: {
          sectionWord: [{required: true, message: '请输入节名称', targger: blur}]
        }
      }
    },
    created() {
      this.acceptWord();
    },
    mounted() {
      this.getData()
    },
    methods: {
      addChapter(id) {
        if (id) {
          // 章重命名
        }
        this.chapterDialog = true
      },
      addSection(id) {
        console.log("addSection id :" + id);
        if (id) {
          // 节重命名
        }
        this.sectionDialog = true
      },
      getData() {
        console.log('课程ID_1', this.$route.params.id);
        this.EduxcloudCourseChapter.courseId = this.$route.params.id;
        if (this.EduxcloudCourseChapter.courseId) {
          getCourseChapterList(getTenantId(), this.EduxcloudCourseChapter.courseId).then(response => {
            this.tableData = response.data.items;
            this.total = response.data.items.length
          })
        }
      },
      // 添加章确定
      chapterDialogConfirm() {
        if (this.acceptEduxcloudCourseId) {
          this.$refs.chapterForm.validate((valid) => {
            if (valid) {
              this.EduxcloudCourseChapter.courseId = this.acceptEduxcloudCourseId;
              this.EduxcloudCourseChapter.tenantId = getTenantId();
              this.EduxcloudCourseChapter.type = 'chapter';
              courseChapter(this.EduxcloudCourseChapter).then(response => {
                if (response.code === 200) {
                  console.log(response.data);
                  this.EduxcloudCourseChapter.id = response.data;
                  // 传值
                  this.chapterId = response.data;
                  this.$refs.chapterForm.resetFields();
                  this.chapterDialog = false;
                  this.$notify({title: '成功', message: '创建成功', type: 'success', duration: 2000});
                  this.getData();
                }
              })
            }
          })
        } else {
          this.$message.error('请先保存课程信息!')
        }
      },
      // 添加章取消
      chapterDialogCancle() {
        this.chapterDialog = false;
        this.$refs.chapterForm.resetFields()
      },
      // 添加节确定
      sectionDialogConfirm() {
        if (this.acceptEduxcloudCourseId) {
          this.$refs.sectionForm.validate((valid) => {
            if (valid) {
              if (this.EduxcloudCourseChapter.courseId) {
                this.EduxcloudCourseChapter.courseId = this.acceptEduxcloudCourseId;
                this.EduxcloudCourseChapter.unitParentId = this.chapterId;
                this.EduxcloudCourseChapter.tenantId = getTenantId();
                courseChapter(this.EduxcloudCourseChapter).then(response => {
                  if (response.code === 200) {
                    this.$refs.sectionForm.resetFields();
                    this.sectionDialog = false;
                    this.$notify({title: '成功', message: '创建成功', type: 'success', duration: 2000});
                  }
                })
              }
            }
          })
        } else {
          this.$message.error('请先保存课程信息!')
        }
      },
      // 添加节取消
      sectionDialogCancle() {
        this.sectionDialog = false;
        this.$refs.sectionForm.resetFields()
      },
      // 阻止事件冒泡
      stopPreven(e) {
        e.stopPropagation()
      },
      // 删除章
      deleteChapter(index) {
        this.classHourList.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      },
      // 删除节
      deleteSection(index, num) {
        this.classHourList[index].sectionList.splice(num, 1);
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      },
      // 添加课时
      addClassHour(id) {
        console.log("chapterId:" + id);
        this.chapterId = id;
        this.addCourseDialog = true
      },
      changeVisiable(val) {
        this.addCourseDialog = val
      },
      // 发布课时
      courseIssue(index) {
        this.classHourList[0].stairCourse[index].status = false;
        this.$message({
          type: 'success',
          message: '发布成功'
        })
      },
      cancelIssue(index) {
        this.classHourList[0].stairCourse[index].status = true;
        this.$message({
          type: 'success',
          message: '发布取消'
        })
      },
      deleteCourse(index) {
        this.classHourList[0].stairCourse.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      },
      // 接收兄弟传值
      acceptWord() {
        eventBus.$on('acceptEduxcloudCourseId', (data) => {
          console.log('accept course id:' + data);
          this.acceptEduxcloudCourseId = data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .classHourBox {
    padding: 10px;

    .topTitle {
      font-size: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }

    .collapseTitle {
      position: relative;

      .collapse-hint {
        margin-left: 20px;
        font-size: 18px;
      }

      .collapse-btn {
        position: absolute;
        right: 50px;
      }
    }
  }

  /deep/ .el-collapse {
    .el-collapse-item__header.is-active {
      background-color: #e4fafd;
    }

    .el-collapse-item__header {
      background-color: #f0f3ff;
    }
  }

  .stairCard-box {
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .stairCard-title {
      height: 30px;
      display: flex;
      align-items: center;
      background-color: #fafafa;
      padding: 25px;

      .stairCard-title-hint {
        margin-left: 20px;
      }

      .stairCard-title-btn {
        margin-left: auto;
      }
    }

    .stairCard-content {
      display: flex;
      align-items: center;
      padding: 20px;

      .stairCard-content-step {
        display: flex;
        align-items: center;
        width: 20%;
        // text-align: center;
        .active {
          color: #43bc60;
        }

        a {
          margin-left: 20%;
          width: 150px;
          text-align: center;
          justify-content: center;
          display: flex;
          align-items: center;

          .i-left {
            // margin-left: 40%;
          }

          div {
            margin-left: 10px;
          }
        }

        span {
          margin-left: auto;
        }
      }
    }
  }
</style>
